<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>hayTour, Home</title>
	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
	
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/validar.js"></script>
<script type="text/javascript" src="script/validarL.js"></script>
</head>

<body>
  <div id="wrapper">
    
    <div id="header">
      <div id="logo">
        <p></p>
      </div>
      
      <div id="nav">
      <div id="transparencia2">
			<div id="transparenciaMensaje2"></div>
		</div>
        <ul>
           <form id="forma1" name="forma1" method="post" onSubmit="javascript:return validarL()" action="PerfilUsuario.html" >
              <label>
                <li><a> CORREO</a>
                <label>
                    <input type="text" name="correoLogin" id="correoLogin" value="${usuario.correo}"/>
                </label>
                </li>
          	<li><a >CLAVE</a></li>
                <label>
                  <input type="password" name="claveLogin" id="claveLogin" value="${usuario.clave}"/>
                </label>  
              <input type="button" value="Ir" onClick="javascript:validarL()"/>
              </label>
          </form>
        
        </ul>
      </div>
      <div id="gallery">
        <ul>
          <li class="gwomen"><a href="http://www.freewebsitetemplates.com">Viajes</a></li>
          <li class="gkids"><a href="http://www.freewebsitetemplates.com">Aventuras</a></li>
          <li class="gmen"><a href="http://www.freewebsitetemplates.com">Amigos</a></li>
        </ul>
      </div>
    </div>
    <div id="body">
      <div id="categories">
       <img name="Login" src="images/ImagenLogin.jpg"/>
      </div>
      <div id="seasonal">
        <div class="inner">
            <li><a aling ="right" href="olvidoIngreso.html">¿Olvido Contraseña?</a></li>
          <h5><c:out value="${cuenta}"/></h5>
            
           <h2>REGISTRATE:</h2>
          <form id="forma" name="forma" method="post" onSubmit="javascript:return validar()" action="saveUsuario.html" >
              <div id="mensajeV">
			<div id="mensajeValida"></div>
		</div>
            <table width="443" border="0">
                        <tr>
                            <td width="6">&nbsp;</td>
                        <td width="427">

              <tr>
                                        <td width="41%" valign="top"><div align="right" class="style3"><strong>Nombre:</strong></div></td>
                                        <td width="59%"><input name="nombre" type="text" class="text" id="nombre" value="${usuario.nombre}" size="22,8" maxlength="30"/>
                                        <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Nombre')"></span></td>
              </tr>
                                    <tr>
                                        <td valign="top"><div align="right" class="style3"><strong>Apellido:</strong></div></td>
                                        <td><input name="apellido" type="text" class="text" id="apellido" value="${usuario.apellido}" size="22,8" maxlength="30"/>
                                           <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Apellido')"></span></td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><div align="right" class="style3"><strong>Correo Electronico:</strong></div></td>
                                        <td><input name="correo" type="text" class="text" id="correo" value="${usuario.correo}" size="22,8" maxlength="150"/>
                                            <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Correo')"></span></td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><div align="right" class="style3"><strong>Username:</strong></div></td>
                                        <td><input name="username" type="text" class="text" id="username" value="${usuario.username}" size="22,8" maxlength="35"/>
                                            <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Username')"></span></td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><div align="right" class="style3"><strong>Contraseña:</strong></div></td>
                                        <td><input name="clave" type="password" class="text" id="clave" value="${usuario.clave}" size="24,8" maxlength="35"/>
                                            <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Clave')"></span></td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><div align="right" class="style3"><strong>Confirmar Contraseña:</strong></div></td>
                                        <td><input name="confclave" type="password" class="text" id="confclave" value="" size="24,5" maxlength="35"/>
                                         <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Confirmación clave')"></span></td>
                                    </tr>
                                    <tr>
                                      <td><div align="right" class="style3"><strong>Sexo:</strong></div></td>
                                      <td><label>
                                        <select style='width:170px; height:22px;' name="sexo" class="text" id="sexo" value="${usuario.sexo}">
                                          <option value="0" selected="selected">Sexo</option>
                                          <option value="MASCULINO">Masculino</option>
                                          <option value="FEMENINO">Femenino</option>
                                        </select>
                                      <span class="ayuda"><img src="images/ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Sexo')"></span></label></td>
                                    </tr>
                                    <tr>
                                      <td><input name="estatus" type="hidden" class="text" id="estatus" value="ACTIVADA" size="24,5" maxlength="35"/></td>
                                      <td> <input name="status" type="hidden" class="text" id="status" value="ACTIVADA" size="22,8" maxlength="35"/>	  
                                      </td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td><input type="button" value="Registrar" onClick="javascript:validar()"/></td>
                                    </tr>
</table>
            <blockquote>
              <blockquote>
                <p><strong> * Todos los Campos son Obligatorios</strong></td>
                </p>
              </blockquote>
            </blockquote>
                        </tr>
          </form>
        </div>
      </div>
      <div class="clear"></div>
      <div id="seas">
        <div id="seas-one"></div>
        <div id="seas-two"></div>
        <div id="seas-three"></div>
        <div class="clear"> </div>
      </div>
    </div>
    <div id="copyright">
      <h5>Copyright &copy; 2010. Company hayTour all rights reserved</h5>
</div>
  </div>
<!-- Capa para mostrar los mensajes de ayuda al presionar los iconos correspondientes -->
<div id="mensajesAyuda">
	<div id="ayudaTitulo"></div>
	<div id="ayudaTexto"></div>
</div>
</body>
</html>